<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>注册</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			input[type='checkbox']+label{color:#999999 ;width:22%!important;font-size:14px;padding-right: 0!important;}
			input[type='checkbox']+label+a{color:#333333 ;font-size:12px;}
			input[type='checkbox']+label+a+a{color:#333333 ;font-size:12px;}
		</style>
	</head>

	<body>
	<div id="headerNav"></div>
	<!--------填写注册内容----------->
		<div class="mui-content" style="background:white!important;margin-top:45px;">
			<div class="mui-input-group">
				<div class="mui-input-row" style="height:60px;line-height: 60px;">
					<input type="text" class="mui-input" style="width: 60%;" id="phoneTest" placeholder="请输入您的手机号">
					<button class="mui-pull-right yzm" style="margin: 14px 15px 0 0;border-radius: 5px;color: #5763FF;border: 1px #5763FF solid;">获取验证码</button>
				</div>
				<div class="mui-input-row" style="height:60px;line-height: 60px;">
					<!--<label>用户名：</label>-->
					<input type="text" class="mui-input-clear" id="authCode" placeholder="请输入验证码">
				</div>
				<div class="mui-input-row" style="height:60px;line-height: 60px;">
					<!--<label>用户名：</label>-->
					<input type="text" class="mui-input-clear" id="passwordTest" placeholder="请设置您的密码(含字母和数字)">
				</div>
				<div class="mui-input-row" style="height:60px;line-height: 60px;">
					<!--<label>用户名：</label>-->
					<input type="text" class="mui-input-clear"  id="passwordTestPre" placeholder="请再次输入上面的密码">
				</div>
			</div>
	<!--------确认注册----------->
			<div class="mui-button-row" style="background:white;margin-top:22px;">
				<button type="button" onclick="loginBtn()" class="mui-btn mui-btn-primary" id="btn" style="width:95%;height:50px;background:#5763FF;">注册</button>
			</div>
			<div class="mui-card-content-inner">
				<div class="mui-input-row mui-checkbox mui-left">
					<input name="checkbox" type="checkbox" id="checkRadio" checked="checked">
					<label>我同意</label><a href="privacy.html">《隐私政策》和</a><a href="serve.html">《服务条款》</a>
				</div>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('#headerNav').load('header.html',function(){
			$('header h1').html('注册');
		});
		mui('.mui-input-row').on('tap', 'a', function() {
			window.top.location.href = this.href;
		})
	</script>
	<script type="text/javascript">
		function setTime() {

			var time = 60;
			var setTime = setInterval(function() {
				if(time <= 1) {
					clearInterval(setTime);
					$(".yzm").html('获取验证码');
					return;
				}
				time--;
				$(".yzm").css({'width':'92px'})
				$(".yzm").html(time+'s');
			}, 1000);
		}
		//		获取验证码接口
		function yzm(){
			$(".yzm").click(function(){
				var phoneTest = $("#phoneTest").val();
				if(phoneTest==""){
					mui.alert('', '手机号不能为空');
				}else if(!(/^1[34578]\d{9}$/.test(phoneTest))){
					mui.alert('', '请输入正确的手机号');
				}else{
					
					$.ajax({
						type: "post",
						url: "http://mall.itcn99.com/i/index/baiwu_code",
						dataType: "jsonp",
						async: true,
						data: {
							"mobile":phoneTest,
						},
						success: function(data) {
							setTime();
							console.log(data);
							mui.alert('', '验证码发送成功');
						}
					})
				}
				
			})
		}
		
		yzm();
		//判断手机号是否注册
		$('#phoneTest').blur(function(){
			var phoneVal=$('#phoneTest').val();
			var authCode=$('#authCode').val();
			var passwrod=$('#passwordTest').val();
			$.ajax({
				type:"post",
				url:"http://mall.itcn99.com/i/index/is_reg",
				async:true,
				dataType:'jsonp',
				data:{
					'mobile':phoneVal
				},
				success:function(data){
					if(data.state==1){
						yzm();
					}else if(data.state==0){
						mui.alert('', '该手机号已注册');
					}else if(data.state==-1){
						mui.alert("", data.msg);
					}
				}
				
			});
		})
		//注册接口
		function loginBtn(){
			var phoneVal=$('#phoneTest').val();
			var authCode=$('#authCode').val();
			var passwrod=$('#passwordTest').val();
			var phoneTest=$('#phoneTest').val().trim();
			var passwordTest=$('#passwordTest').val().trim();
			var passwordTestPre=$('#passwordTestPre').val().trim();
			
			num(phoneTest,RegPhone);
			num(passwordTest,RegPassword);
			num(passwordTestPre,RegPassword);
			var chk=document.getElementById('checkRadio');
			if(judge==true){
				if(!chk.checked){
					mui.alert('','请阅读协议')
				}else{
					$.ajax({
						type:"post",
						url:"http://mall.itcn99.com/i/index/reg",
						async:true,
						dataType:'jsonp',
						data:{
							'mobile':phoneVal,
							'ucode':authCode,
							'password':passwrod
						},
						success:function(data){
	//						state:1 注册成，0验证码输入错误，2手机号已注册
							if(data.state==1){
								mui.alert('', '注册成功', function() {
									window.location.href='register.html';
								})
							}else if(data.state==0){
								mui.alert('', '验证码输入错误', function() {
									return true;
								})
							}else if(data.state==2){
								mui.alert('', '手机号已注册', function() {
									return true;
								})
							}
						}
					});
				
				}
				
				
			}
		}
	</script>
</html>